<!--  frame 模板 -->
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>公告详情</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css" />

	<style>
		body {
			background-color: #f5f5f5;
		}

		.content {
			padding: 15px;
		}

		.noticeNewList {
			display: flex;
			background: #fff;
			padding: 0.10rem;
			border-radius: 0.10rem;
			margin-bottom: 0.10rem;
		}

		.type_name {
			min-width: 1.20rem;
			height: 0.24rem;
			text-align: center;
			line-height: 0.24rem;
			font-size: 0.24rem;
			color: #fff;
			background: rgba(254, 189, 27);
			padding: 0.10rem 0;
			border-radius: 0.10rem;
			margin-right: 0.20rem;
		}

		.notice_title {
			line-height: 0.40rem;
			font-size: 0.30rem;
			color: #333;
			margin-bottom: 0.10rem;
		}

		.rich_text {
			font-size: 0.28rem;
			color: #999;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.lading {
			display: flex;
			justify-content: center;
			align-content: center;
			font-size: .30rem;
			color: #aaa;
			margin-bottom: .50rem;
		}
	</style>
</head>

<body>
	<div class="content app" v-cloak>
		<div class="noticeNewList" v-for="(item,index) in list" :key="index" @click="fnNoticeNewDetail(item.id)">
			<span class="type_name">{{item.type_name}}</span>
			<div class="notice">
				<div class="notice_title">{{item.title}}</div>
				<div class="rich_text">
					<div v-html="item.context"></div>
				</div>
			</div>
		</div>

		<div v-if="list.length != 0" class="lading">
			<div v-if="lading == 1">上拉加载</div>
			<div v-if="lading == 2">正在加载...</div>
			<div v-if="lading == 3">没有更多数据</div>
		</div>
	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
	window.addEventListener("apiready", function() {
		index()
	});

	function index() {
		var vm = new Vue({
			el: ".app",
			data: {
				page: 1,
				size: 10,
				lading: 1,
				list: [],
			},
			mounted: function() {
				this.noticeNewList()
				this.setCustomRefreshHeaderInfo()
				this.vmaddEventListener()
			},
			methods: {
				// 下拉刷新
				setCustomRefreshHeaderInfo: function() {
					api.setCustomRefreshHeaderInfo({
						bgColor: '#eee',
						tips: {
							pull: '下拉刷新',
							threshold: '松开立即刷新',
							load: '正在刷新'
						}
					}, function() {
						vm.noticeNewList() //获取数据
					});
				},

				// 上拉加载
				vmaddEventListener: function() {
					api.addEventListener({
						name: 'scrolltobottom',
						extra: {
							threshold: 0 //设置距离底部多少距离时触发，默认值为0，数字类型
						}
					}, function(ret, err) {
						vm.noticeNewListPush() //获取数据  上拉加载
					});
				},

				//商城公告列表
				noticeNewList: function() {
					this.lading = 2
					this.page = 1
					AjaxSafe({
						url: '/xapp/index/noticeNewsList',
						data: {
							page: this.page,
							size: this.size
						},
						loader: true,
						success: ret => {
							if (ret.state) {
								let noticeList = (ret.data.list || []).map(item => {
									return item
								})
								vm.list = noticeList

								if (vm.list.length == ret.data.totalRow) {
									vm.lading = 3
								} else {
									vm.lading = 1
								}
							} else {
								vm.lading = 3
								api.toast({
									msg: res.msg,
									duration: 2000,
									location: 'middle'
								});
							}
							api.refreshHeaderLoadDone() //关闭下拉刷新状态
						},
						failed: function(err) {
							api.refreshHeaderLoadDone() //关闭下拉刷新状态
							alert("网络故障！");
						}
					})
				},

				//上拉加载更多
				noticeNewListPush: function() {
					if (this.lading != 1) return ++this.page
					this.lading = 2
					AjaxSafe({
						url: "/xapp/index/noticeNewsList",
						data: {
							page: this.page,
							size: this.size
						},
						loader: true,
						success: ret => {
							if (ret.state) {
								vm.list.push(...ret.data.list)
								if (vm.list.length == ret.data.totalRow) {
									vm.lading = 3
								} else {
									vm.lading = 1
								}
							} else {
								vm.lading = 3
								api.toast({
									msg: res.msg,
									duration: 2000,
									location: 'middle'
								});
							}
							api.refreshHeaderLoadDone() //关闭下拉刷新状态
						},
						failed: function(err) {
							api.refreshHeaderLoadDone() //关闭下拉刷新状态
							alert("网络故障！");
						}
					});
				},

				//打开公告详情
				fnNoticeNewDetail: function(id) {
					//alert(id)
					api.openWin({
						name: 'shop_noticeDetail',
						url: './shop_noticeDetail.html',
						pageParam: {
							id: id
						}
					});

				}
			},

		});
	}
</script>

</script>

</html>
